<!--
 * @Author: wangming
 * @Date: 2020-09-09 14:04:55
 * @LastEditors: wangming
 * @LastEditTime: 2022-07-27 14:27:11
 * @Description:添加类别按钮
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="600px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span v-if="isEdit">编辑按钮</span>
        <span v-else>添加按钮</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>
    <el-form
      class="pl30 pr30"
      :model="FormData"
      inline
      ref="Form"
      label-width="140px"
    >
      <el-form-item
        label="按钮类型"
        prop="buttonHandler"
        :rules="[
          { required: true, message: '请选择按钮类型', trigger: 'change' },
        ]"
      >
        <el-radio-group v-model="FormData.buttonHandler" :disabled="cuestomBtn">
          <el-radio label="system">系统</el-radio>
          <el-radio label="custom">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="FormData.buttonHandler === 'system'"
        label="内置功能"
        prop="systemAction"
        :rules="[
          { required: true, message: '请选择内置功能', trigger: 'change' },
        ]"
      >
        <el-select v-model="FormData.systemAction" @change="changeButtonLable">
          <el-option
            v-for="item in TABLE_OPERATE_BUTTON_TYPE"
            :key="item.handler"
            :value="item.handler"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="
          ['info', 'edit'].includes(FormData.systemAction) &&
          FormData.buttonHandler === 'system'
        "
        label="关联页面"
        prop="relatinonFormId"
        :rules="[
          { required: true, message: '请选择关联页面', trigger: 'change' },
        ]"
      >
        <tree-select
          v-model="FormData.relatinonFormId"
          style="width: 100%"
          placeholder="请选择页面"
          filterable
          :fieldMap="{
            value: 'id',
            label: 'name',
            disabled: 'disabled',
          }"
          :filterNodeMethod="filterNodeMethod"
          :treeData="formlist"
        />
      </el-form-item>
      <el-form-item
        label="按钮名称"
        prop="label"
        :rules="[
          { required: true, message: '请输入按钮名称', trigger: 'blur' },
        ]"
      >
        <el-input
          style="width: 300px"
          v-model="FormData.label"
          size="small"
          placeholder="请输入"
        ></el-input>
        <GlobalizationConfigWord
          class="i18-box"
          @setLangCode="(v) => $set(FormData, 'title_i18n', v)"
          :localism="FormData.title_i18n"
        ></GlobalizationConfigWord>
      </el-form-item>
      <el-form-item
        v-if="FormData.buttonHandler === 'custom'"
        label="事件方式"
        prop="composeType"
        :rules="[
          { required: true, message: '请选择事件类型', trigger: 'change' },
        ]"
      >
        <el-radio-group v-model="FormData.composeType" :disabled="isEdit">
          <el-radio label="custom">自定义</el-radio>
          <el-radio label="logic">逻辑编排</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="
          FormData.composeType === 'custom' &&
          FormData.buttonHandler === 'custom'
        "
        label="事件名称"
        prop="eventName"
        :rules="[
          { required: true, message: '请输入事件名称', trigger: 'blur' },
          {
            pattern: /^(BLOCKLY\.)?[a-z_]{1}[a-zA-Z0-9_]{0,127}$/,
            message: '事件名称必须以字母或_开头，包含数字、字母及_',
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (SYSTEM_RETAIN.indexOf(value) > -1) {
                callback(new Error('事件名称不能使用系统关键字或者保留字'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          style="width: 300px"
          v-model="FormData.eventName"
          size="small"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="
          FormData.composeType === 'logic' &&
          FormData.buttonHandler === 'custom'
        "
        label="编排名称"
        prop="eventName"
        :rules="[
          { required: true, message: '请输入编排名称', trigger: 'blur' },
        ]"
      >
        <el-input
          style="width: 300px"
          v-model="FormData.eventName"
          size="small"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="按钮样式" v-if="FormData.buttonHandler === 'custom'">
        <el-select
          v-model="FormData.buttonType"
          placeholder="默认"
          style="width: 300px"
        >
          <el-option value="" label="主要(primary)"></el-option>
          <el-option value="success" label="成功(success)"></el-option>
          <el-option value="info-button" label="信息(info)"></el-option>
          <el-option value="warning" label="警告(warning)"></el-option>
          <el-option value="danger" label="危险(danger)"></el-option>
        </el-select>
      </el-form-item>
      <ImportBtn
        v-if="
          FormData.systemAction === 'import' &&
          FormData.buttonHandler === 'system'
        "
        :value="FormData.importTemplate"
        :formOption="formOption"
      ></ImportBtn>
      <el-form-item
        label="是否开启二次确认"
        v-if="
          !['delete', 'import'].includes(FormData.systemAction) ||
          FormData.buttonHandler !== 'system'
        "
      >
        <el-switch v-model="FormData.isSecondaryConfirm" />
      </el-form-item>

      <el-form-item
        label="二次确认内容"
        prop="SecondaryConfirmCon"
        v-if="FormData.isSecondaryConfirm"
        :rules="[
          { required: true, message: '请输入二次确认内容', trigger: 'blur' },
        ]"
      >
        <el-input
          style="width: 300px"
          v-model="FormData.SecondaryConfirmCon"
          size="small"
          placeholder="请输入"
        ></el-input>
        <GlobalizationConfigWord
          class="i18-box"
          @setLangCode="(v) => $set(FormData, 'ConfirmCon_i18n', v)"
          :localism="FormData.ConfirmCon_i18n"
        ></GlobalizationConfigWord>
      </el-form-item>
      <Ruleconditions
        :formOption="formOption"
        :FormData="FormData"
      ></Ruleconditions>
    </el-form>

    <div slot="footer" class="tr">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cloneDeep } from "lodash";
import { SYSTEM_RETAIN } from "@/utils/const";
import { TABLE_OPERATE_BUTTON_TYPE } from "@/utils/enum";
import { getHmpagefolderListTree } from "@/apis/paas/HmPageFolderController.js";
import { filterNodeMethod } from "@/utils/treeSelectFormat";
import lodash from "lodash";
import GlobalizationConfigWord from "@/components/globalizationConfigWord.vue";
import Ruleconditions from "../../../__comModule__/Ruleconditions";
import ImportBtn from "./ImportBtn.vue";
export default {
  data() {
    return {
      cuestomBtn: false,
      SYSTEM_RETAIN,
      TABLE_OPERATE_BUTTON_TYPE,
      FormData: {
        label: "",
        eventName: "",
        composeType: "custom",
        buttonType: "",
        buttonHandler: "system",
        systemAction: "",
        relatinonFormId: "",
        RuleConditions: [], //显隐藏规则
        isSecondaryConfirm: false,
        SecondaryConfirmCon: "",
        title_i18n: "",
        ConfirmCon_i18n: "",
        importTemplate: {
          templateType: "",
        },
      },
      formOption: {},
      showVisible: false,
      callback: () => {},
      isEdit: false,
      formlist: [],
      filterNodeMethod,
    };
  },
  components: { GlobalizationConfigWord, Ruleconditions, ImportBtn },
  watch: {
    "FormData.label": {
      handler(val) {
        if (this.FormData.composeType === "logic") {
          this.FormData.eventName = val;
        }
      },
    },
    "FormData.composeType": {
      handler(val) {
        if (val === "logic") {
          this.FormData.eventName = this.FormData.label;
        }
      },
    },
  },
  methods: {
    changeButtonLable(value) {
      if (this.FormData.buttonHandler === "system") {
        this.$set(
          this.FormData,
          "label",
          this.TABLE_OPERATE_BUTTON_TYPE.find((item) => {
            return item.handler === value;
          }).label
        );
      }
    },
    editForm(FormData = {}, formOption, { cuestomBtn }) {
      this.cuestomBtn = cuestomBtn;
      this.formOption = cloneDeep(formOption);
      FormData.composeType = FormData.composeType || "custom";
      FormData.buttonHandler =
        FormData.handler === "custom" ? "custom" : "system";
      FormData.systemAction =
        FormData.handler === "custom" ? "" : FormData.handler;
      this.FormData = cloneDeep(FormData);
      this.isEdit = true;
      this.getFormList();
      return this.showModel();
    },
    addForm(formOption, { cuestomBtn }) {
      this.cuestomBtn = cuestomBtn;
      this.formOption = cloneDeep(formOption);
      this.getFormList();
      this.FormData.composeType = "custom";
      this.FormData.eventName = "";
      this.FormData.label = "";
      this.FormData.buttonType = "";
      this.FormData.buttonHandler = cuestomBtn ? "custom" : "system";
      this.FormData.systemAction = "";
      this.FormData.relatinonFormId = "";
      this.FormData.RuleConditions = [];
      this.isEdit = false;
      this.FormData.isSecondaryConfirm = false;
      this.FormData.SecondaryConfirmCon = "";
      this.FormData.title_i18n = "";
      this.FormData.ConfirmCon_i18n = "";
      this.FormData.importTemplate.templateType = "";
      return this.showModel();
    },
    showModel() {
      this.showVisible = true;
      this.$nextTick(() => {
        this.$refs.Form.clearValidate();
      });
      return {
        then: (callback) => {
          if (typeof callback === "function") {
            this.callback = callback;
          }
        },
      };
    },
    async submit() {
      if (this.FormData.buttonHandler === "system") {
        this.FormData.eventName = "";
      } else {
        this.FormData.systemAction = "";
        this.FormData.relatinonFormId = "";
      }
      if (this.FormData.systemAction === "delete") {
        this.FormData.buttonType = "danger";
      }
      try {
        await this.$refs.Form.validate();
        this.showVisible = false;
        this.callback(this.FormData);
      } catch (error) {}
    },
    async cancel() {
      await this.$refs.Form.clearValidate();
      this.showVisible = false;
    },
    async getFormList() {
      const formlist = await getHmpagefolderListTree({
        modelCode: this.formOption.modelCode,
        type: "ALL",
      });
      formlist.forEach((node) => {
        node.type = "folder";
      });
      this.formlist = this.createPageTreeNode(formlist);
    },
    createPageTreeNode(tree) {
      return lodash.cloneDeep(tree).map((node) => {
        node.disabled = node.type === "folder";
        if (node.pageResults) {
          node.id = "folder" + node.id;
          node.children = node.pageResults || [];
          node.children.forEach((item) => {
            item.name = `${item.name}`;
          });
        }
        return node;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.max {
  width: 220px;
}

.i18-box {
  margin-left: 10px;
}
</style>
